<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="../css/统筹修饰.css" />
  <link rel="stylesheet" href="../css/cf首页修饰.css" />
  <link rel="stylesheet" href="../img/font_odolx4hy8w/iconfont.css" />
  <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
  <script src="../js文件/axios.min.js"></script>
  <script src="../js文件/api.js"></script>
  <script src="../js文件/swiper-bundle.min.js"></script>
</head>

<body>
  <div class="top-bei">
    <div class="top">
      <div class="top-1">
        <a href="https://mall.qq.com/cf/" target="_blank"><img src="../img/图标1.png" alt="" /></a>
      </div>
      <div class="top-2">
        <a href="https://mall.qq.com/cf/" target="_blank"><img src="../img/图标2.png" alt="" /></a>
      </div>
      <div class="top-3">
        <div class="top-3-1">
          <div class="iconfont icon-sousuo_huaban1" id="search"></div>
        </div>
        <input type="text" id="ipt" class="top-3-2" placeholder="请输入搜索内容" />

        <div class="top-3-3">
          <div class="iconfont icon-guanyuwomen"></div>
          <h4 id="user"><a href="cf登录页.html">立即登录</a></h4>
        </div>
        <div class="top-3-4">
          <div class="iconfont icon-gouwuche"></div>
          <h4><a href="cf购物车.html">购物车</a></h4>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-left">
        <a href="cf首页.html" class="nav-left-ho">首页</a>
        <a href="cfNav详情页.html" class="nav-left-ho">枪模主题站</a>
        <a href="cfNav详情页.html" class="nav-left-ho">服饰时尚</a>
        <a href="cfNav详情页.html" class="nav-left-ho">包类专区</a>
        <a href="cfNav详情页.html" class="nav-left-ho">家居日用</a>
        <a href="cfNav详情页.html" class="nav-left-ho">模型手办</a>
      </div>
      <div class="nav-right">
        <h2>全部商品</h2>
        <div class="iconfont icon-shouye_huaban1"></div>
      </div>
    </div>
  </div>
  <div class="hid-bei">
    <div class="hid" style="display: none;">
      <div class="ul">
        <div class="ul-1">
          <ul><img src="../img/ul-1.png" alt="">
            <ul>家具日用
              <li>背包</li>
              <li>雨伞</li>
              <li>水杯</li>
              <li>卫衣</li>
              <li>T恤</li>
            </ul>
          </ul>
        </div>
        <div class="ul-1">
          <ul><img src="../img/ul-2.png" alt="">
            <ul>数码外设
              <li>背包</li>
              <li>雨伞</li>
              <li>水杯</li>
              <li>卫衣</li>
              <li>T恤</li>
            </ul>
          </ul>
        </div>
        <div class="ul-1">
          <ul><img src="../img/ul-3.png" alt="">
            <ul>服饰时尚
              <li>背包</li>
              <li>雨伞</li>
              <li>水杯</li>
              <li>卫衣</li>
              <li>T恤</li>
            </ul>
          </ul>
        </div>
        <div class="ul-1">
          <ul><img src="../img/ul-4.png" alt="">
            <ul>模型手办
              <li>背包</li>
              <li>雨伞</li>
              <li>水杯</li>
              <li>卫衣</li>
              <li>T恤</li>
            </ul>
          </ul>
        </div>

      </div>
    </div>
  </div>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../img/banner1.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="../img/banner2.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="../img/banner3.jpg" alt="" /></div>
      <div class="swiper-slide"><img src="../img/banner4.jpg" alt="" /></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>
  <div class="banner-bei">
    <div class="banner">
      <div class="banner-1">
        <div class="banner-1-1">
          <h1>模型手办</h1>
          <p>品质重现 限量发售</p>
          <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">更多
            <div class="iconfont icon-daohang"></div>
          </a>
        </div>
        <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">
          <div class="banner-2">
            <img src="../img/mid1.jpg" alt="" />
          </div>
        </a>
        <div class="banner-3">
          <div class="banner-3-1">
            <ul>
              <!-- <a href="cf商品详情页.html" target="_blank">
              <li><img src="../img/mid2.jpg" /></li>
              <li>
                <h2 class="p1">蝴蝶Q版手办-盲盒[随机单款]</h2>
              </li>
              <li>
                <h3>￥79</h3>
              </li>
            </a> -->
            </ul>
          </div>
        </div>
      </div>
      <div class="banner-1">
        <div class="banner-1-1">
          <h1>个性生活</h1>
          <p>购好物 秀个性</p>
          <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">更多
            <div class="iconfont icon-daohang"></div>
          </a>
        </div>
        <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">
          <div class="banner-2">
            <img src="../img/图2-1.jpg" alt="" />
          </div>
        </a>
        <div class="banner-3">
          <div class="banner-3-2">
            <ul>
              <!-- <a href="cf商品详情页.html" target="_blank">
              <li><img src="../img/图2-2.jpg" /></li>
              <li>
                <h2 class="p1">蝴蝶Q版手办-盲盒[随机单款]</h2>
              </li>
              <li>
                <h3>￥79</h3>
              </li>
            </a> -->
            </ul>
          </div>
        </div>
      </div>
      <div class="banner-1">
        <div class="banner-1-1">
          <h1>新颖数码</h1>
          <p>拥有你的专属游戏利器</p>
          <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">更多
            <div class="iconfont icon-daohang"></div>
          </a>
        </div>
        <a href="https://mall.qq.com/cf/productlist.shtml?catid=168" target="_blank">
          <div class="banner-2">
            <img src="../img/图3-1.jpg" alt="" />
          </div>
        </a>
        <div class="banner-3">
          <div class="banner-3-3">
            <ul>
              <!-- <a href="cf商品详情页.html" target="_blank">
              <li><img src="../img/图3-2.jpg" /></li>
              <li>
                <h2 class="p1">蝴蝶Q版手办-盲盒[随机单款]</h2>
              </li>
              <li>
                <h3>￥79</h3>
              </li>
            </a> -->
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bot-bei">
    <div class="bot">
      <div class="bot-m">
        <div class="bot-m-1">
          <a href="https://mall.qq.com/cf">
            <img src="../img/bot-m-1-1.png" alt="" class="bot-m-1-1" /></a>
          <a href="https://mall.qq.com/cf"><img src="../img/bot-m-1-2.png" alt="" class="bot-m-1-2" />
        </div></a>
        <div class="bot-m-2">
          <a href="https://mall.qq.com/help.shtml?gotab=4"> <img src="../img/底部.jpg" alt=""></a>
        </div>
        <div class="bot-m-3">
          <ul>
            <li><img src="../img/bot-1.png" alt="" class="im"></li>
            <li>掌上穿越火线</li>
          </ul>
          <ul>
            <li><img src="../img/bot-2.jpg" alt="" class="im"></li>
            <li>聚诚品公众号</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="last-bei">
    <div class="last">
      <a href="https://game.qq.com/contract.shtml" target="_blank">
        <p class="last-p1">
          腾讯互动娱乐I服务条款|腾讯游戏隐私保护指引腾讯游戏儿童隐私保护指引广告服务I腾讯游戏招聘I腾讯游戏客服I 游戏地图I
          成长守护平台I商务合作I网站导航<br>粤网文[2014]0633-233号增值电信业务经营许可证:客B2- 20090059 B2-20090028违法和不良信息举报电话: 0755-83767606
          <br>COPYRIGHT◎1998 - 2020 TENCENT. ALL RIGHTS RESERVED. <br>腾讯公司版权所有<br>
        </p>
      </a>
      <a href="https://szcert.ebs.org.cn/1efd63b4-7863-490a-839f-53968220109f" target="_blank">
        <div class="last-p2">
          <img src="../img/警徽.png" alt="">工商网监电子标识

        </div>
      </a>
    </div>
  </div>
  <script>
    // 商品列表
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    // 登录成功后显示用户名
    let username = localStorage.getItem("username")
    let user = document.querySelector("#user");
    if (username) {
      user.innerHTML = username
    }
 
    // 二级菜单
    navRight();



    function navRight() {
      let navRight = document.querySelector(".nav-right")
      let allHid = document.querySelector(".hid")
      navRight.onmouseenter = function () {
        allHid.style.display = "block";
        navRight.onmouseleave = function () {
          allHid.style.display = "none";
        }
        allHid.onmouseenter = function () {
          allHid.style.display = "block";
        }
        allHid.onmouseleave = function () {
          allHid.style.display = "none";
        }
      }
    }
    //  商品列表
    loadList();
    async function loadList() {
      // let uid = localStorage.getItem("uid");
      let uid = 63073;
      console.log(uid);
      let { data } = await axios.get(proudtListAPI, { params: { uid } })
      console.log(data);
      let pObj = data.data;
      console.log(pObj);
      let resPobj = pObj.sort((a, b) => a.pid - b.pid);
      console.log(resPobj);
      let arr = resPobj.slice(0, 4);
      let arr2 = resPobj.slice(4, 8);
      let arr3 = resPobj.slice(8, 12);
      console.log(arr);
      console.log(arr2);
      console.log(arr3);
      let resArr = arr.map((v) =>
        `  
         <a href="cf商品详情页.html?pid=${v.pid}" target="_blank">
              <li><img src="${v.pimg}"/></li>
              <li>
                <h2 class="p1">${v.pname}</h2>
              </li>
              <li>
                <h3>￥${v.pprice}</h3>
              </li>
            </a>
        `
      )
      let resArr2 = arr2.map((v) =>
        `  

            <a href="cf商品详情页.html?pid=${v.pid}" target="_blank">
              <li><img src="${v.pimg}"/></li>
              <li>
                <h2 class="p1">${v.pname}</h2>
              </li>
              <li>
                <h3>￥${v.pprice}</h3>
              </li>
            </a>
        `
      )
      let resArr3 = arr3.map((v) =>
        `  

            <a href="cf商品详情页.html?pid=${v.pid}" target="_blank">
              <li><img src="${v.pimg}"/></li>
              <li>
                <h2 class="p1">${v.pname}</h2>
              </li>
              <li>
                <h3>￥${v.pprice}</h3>
              </li>
            </a>
        `
      )
      // console.log(resArr);
      let bannerMid = document.querySelector(".banner-3-1");
      let bannerMid2 = document.querySelector(".banner-3-2");
      let bannerMid3 = document.querySelector(".banner-3-3")
      bannerMid.innerHTML = resArr.join('');
      bannerMid2.innerHTML = resArr2.join('');
      bannerMid3.innerHTML = resArr3.join('');
    }
  </script>
</body>

</html>